<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isEdit && historyList.length">
        <span @click="historyList.splice(0)">全部删除</span>&nbsp;&nbsp;
        <span @click="isEdit=false">完成</span>
      </div>
      <van-icon @click="isEdit=true" v-else  name="delete-o" />
    </van-cell>
    <van-cell v-for="(item,index) in historyList" 
        :key="index"
        :title="item"
        @click="clickCell(item,index)"
    >
      <van-icon v-if="isEdit"  name="close" />
    </van-cell>
  </div>
</template>

<script>
  export default {
    name:'SearchHistory',
    data() {
      return {
        isEdit: false  // 是否修改
      }
    },
    props:{
      // 接收外部传入的历史记录
      historyList:{
        type:Array,
        required:true
      }
    },
    methods: {
      // 单元格点击
      clickCell(val,idx){
        if(this.isEdit){
          // 删除操作
          this.historyList.splice(idx,1)
        }else{
          // 查询对应的搜索历史记录
          console.log("查询对应历史记录");
          this.$emit('search',val)
        }
      }
    }
  }
</script>

<style lang="less" scoped>

</style>